<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.gauge.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A customised and adjustable Gauge chart</title>

    <meta name="description" content="A Gauge chart that is updated periodically by AJAX" />
     
</head>
<body>
    <div style="background-color: #ffc; border: 2px solid #cc0; border-radius: 5px; padding: 5px;">
        <b>Note:</b>
        For security reasons the AJAX demos don't work offline. You can view the demos on the RGraph website here:
        <a href="http://www.rgraph.net/demos/" target="_blank" rel="nofollow">http://www.rgraph.net/demos</a>
    </div>

    <h1>A customised Gauge chart (with AJAX updating)</h1>
    
    <p>
        This Gauge is much like the previous one but with AJAX updating instead of click updating. Because
        of the AJAX it only works when viewed online - which you can do <a href="http://www.rgraph.net/demos/gauge-ajax.html" rel="nofollow">here</a>.
    </p>

    <canvas id="cvs" width="250" height="250">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
            gauge = new RGraph.Gauge({
                id: 'cvs',
                min:0,
                max: 100,
                value: 7,
                options: {
                    border: {
                        outline: 'transparent'
                    },
                    needle: {
                        colors: ['red'],
                        type: 'line'
                    },
                    centerpin: {
                        radius: 0.1
                    },
                    title: {
                        top: 'Speed'
                    },
                    labels: {
                        offset: 7
                    }
                }
            }).on('draw', function (obj)
            {
                var co = obj.context;
    
                // This circle becomes the border of the centerpin
                co.beginPath();
                    co.fillStyle = '#aaa';
                    co.arc(obj.centerx, obj.centery, 10, 0, RGraph.TWOPI, false);
                co.fill();
            })
            .draw();




            var delay = 1500;




            function myAJAXCallback(num)
            {
                gauge.value = num;
                gauge.grow()
                
                
                // Make another AJAX call after the delay (which is in milliseconds)
                setTimeout(function ()
                    {
                        RGraph.AJAX.getNumber('/getdata.html', myAJAXCallback);
                    },
                    delay);
            }




            /**
            * Make the AJAX call every so often (contolled by the delay variable)
            */
            setTimeout(function () {RGraph.AJAX.getNumber('/getdata.html', myAJAXCallback);}, delay);
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>